<template>
  <div class="account-pages mt-5 mb-5">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-5">
          <div class="card" v-if="step === 0">
            <!-- Logo -->
            <div class="card-header pt-4 pb-4 text-center bg-primary">
              <a href="/">
                <span>
                  <img src="/public/images/logo.png" alt height="18" />
                </span>
              </a>
            </div>

            <div class="card-body p-4">
              <div class="text-center w-75 m-auto">
                <h4 class="text-dark-50 text-center mt-0 fw-bold">
                  重置密码
                </h4>
                <p class="text-muted mb-4">
                  请输入你注册时用的手机号，我们将把新密码发送到你的手机上.
                </p>
              </div>

              <form action="#">
                <div class="row mb-3">
                  <label>手机号码</label>
                  <input
                    class="form-control"
                    type="text"
                    required
                    placeholder="输入注册时填写的手机号"
                    v-model.trim="mobile"
                  />
                </div>

                <div class="row">
                  <label>验证码</label>
                  <div class="row">
                    <div class="col-6 pe-0">
                      <input
                        type="text"
                        name="captchaValue"
                        class="form-control"
                        placeholder="验证码"
                        v-model.trim="vcode"
                      />
                    </div>
                    <div class="col-6">
                      <img
                        id="kaptchaImage"
                        class="w-100 h-80"
                        title="点击图片更换验证码"
                      />
                      <small>
                        <a href="javascript:void(0)" @click="refreshKaptcha()"
                          >刷新</a
                        >
                      </small>
                    </div>
                  </div>
                </div>

                <div class="mt-3 mb-0 text-center">
                  <button
                    type="button"
                    class="btn btn-primary "
                    @click.stop="sendSms()"
                  >
                    下一步
                  </button>
                </div>
              </form>
            </div>
            <!-- end card-body-->
          </div>
          <!-- end card -->

          <div class="card" v-if="step === 1">
            <div class="card-header pt-4 pb-4 text-center bg-primary">
              <a href="/">
                <span>
                  <img src="/public/images/logo.png" alt height="18" />
                </span>
              </a>
            </div>
            <div class="card-body p-4">
              <div class="text-center w-75 m-auto">
                <h4 class="text-dark-50 text-center mt-0 fw-bold">
                  修改密码
                </h4>
              </div>

              <form action="#">
                <input type="hidden" name="mobile" :value="mobile" />
                <div class="col-1 mb-3">
                  <label>验证码</label>
                  <input
                    class="form-control"
                    type="text"
                    name="smsVerifyCode"
                    required
                    placeholder="请输入您手机上收到的验证码"
                    v-model.trim="smsCode"
                  />
                </div>

                <div class="col-1 mb-3">
                  <label>新密码</label>
                  <input
                    class="form-control"
                    type="password"
                    name="newPassword"
                    required
                    placeholder
                    v-model.trim="newPassword"
                  />
                </div>

                <div class="col-1 mb-3">
                  <label>再输一次新密码</label>
                  <input
                    class="form-control"
                    type="password"
                    name="confirmPassword"
                    required
                    placeholder
                    v-model.trim="confirmPassword"
                  />
                </div>

                <div class="col-1 mb-0 text-center">
                  <button
                    type="button"
                    class="btn btn-primary"
                    @click.stop="updatePassword()"
                  >
                    修改密码
                  </button>
                </div>
              </form>
            </div>
            <!-- end card-body-->
          </div>

          <div class="card" v-if="step === 2">
            <div
              class="card-header pt-4 pb-4 text-center bg-primary text-white"
            >
              <strong>密码重置成功</strong>
            </div>
            <div class="card-body text-center">
              你的用户名（
              <strong>{{ username }}</strong
              >）密码重置成功!
              <br />
            </div>
          </div>

          <div class="row mt-3">
            <div class="col-12 text-center">
              <p class="text-muted">
                返回
                <router-link to="/login" class="text-dark ms-1">
                  <b>登录</b>
                </router-link>
              </p>
            </div>
            <!-- end col -->
          </div>
          <!-- end row -->
        </div>
        <!-- end col -->
      </div>
      <!-- end row -->
    </div>
    <!-- end container -->
  </div>
</template>

<script>
import { sendSmsVerifyCode, resetPassword } from "@/api/user.js";

export default {
  data() {
    return {
      step: 0,
      username: "",
      mobile: "",
      vcode: "",
      smsCode: "",
      newPassword: "",
      confirmPassword: "",
    };
  },
  mounted: function () {
    $("#kaptchaImage").click(() => {
      this.refreshKaptcha();
    });
    this.refreshKaptcha();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    refreshKaptcha: function () {
      $("#kaptchaImage")
        .attr("src", "/Flight/captcha.do?" + Math.floor(Math.random() * 100))
        .fadeIn();
    },
    sendSms: function () {
      const params = {
        mobile: this.mobile,
        captchaValue: this.vcode,
      };

      this.showLoading("短信验证码发送中...");

      sendSmsVerifyCode(
        params,
        (v) => {
          if (v.status === "OK") {
            this.showErrMsg("验证码已发送");
            this.step = 1;
          } else {
            this.showErrMsg(v.errmsg, "danger");
          }
        },
        () => {
          this.hideLoading();
        }
      );
    },
    updatePassword: function () {
      const params = {
        smsVerifyCode: this.smsCode,
        newPassword: this.newPassword,
        confirmPassword: this.confirmPassword,
        mobile: this.mobile,
      };

      this.showLoading("密码更新中...");
      resetPassword(
        params,
        (v) => {
          if (v.status === "OK") {
            this.showErrMsg("密码修改成功");
            this.username = v.desc;
            this.step = 2;
          } else {
            this.showErrMsg("请检查输入");
          }
        },
        () => {
          this.hideLoading();
        }
      );
    },
  },
};
</script>